<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix='fn' uri='http://java.sun.com/jsp/jstl/functions'%>

<div>
	<form:form action="user?action=save" commandName="person" id="personForm"  enctype="multipart/form-data">
		<form:hidden path="id" />
		<input type="hidden" id="qPersonPage" name="person" value="${person}" />
		<div class="splitcontentleft">
			<div class="box tabular">
				<h4>General Information</h4>
				<p>
					<label>FirstName <span class="required">*</span> </label>
					<form:input path="firstName" />
				</p>
				<p>
					<label>LastName</label>
					<form:input path="lastName"/>
				</p>
				<p>
					<label>Gender </label>
					<form:select path="gender" itemLabel="name" items="${gender }"/>
				</p>
				<p>
					<label>Other Information </label>
					<form:textarea path="otherInformation" ></form:textarea>
				</p>
				<p>
					<label>Nationality</label>
					<form:input path="nationality" />
				</p>
				<p>
					<label>Date of Birth</label>
					<form:input path="dateOfBirth" cssClass="uiDateTextbox"/>
				</p>
				<p>
					<label class="uiLabel">Photo:</label>
					<input type="file" name="file" />
				</p>
				<p>
					<label>Physical Address </label>
					<form:input path="addresses.physicalAddress" ></form:input>
				</p>
				<p>
					<label>Post Office Code </label>
					<form:input path="addresses.postOfficeCode" ></form:input>
				</p>
				<p>
					<label>Email </label>
					<form:input path="addresses.email" ></form:input>
				</p>
				<p>
					<label>Phone No </label>
					<form:input path="addresses.phoneNo" ></form:input>
				</p>
				<p>
					<label>Responsibility </label>
					<form:select path="responsibility" itemLabel="name" itemValue="id" items="${responsibility }" cssClass="uiDropdown"/>
				</p>
			</div>
		</div>
		<div class="splitcontentright">
			<div class="box tabular">
				<h4>Login Information</h4>
				<p>
					<label>Username <span class="required">*</span> </label>
					<form:input path="username" cssClass="uiTextbox" />
				</p>
				<p>
					<label>Secret Question </label>
					<form:input path="secretQuestion" cssClass="uiTextbox" />
				</p>
				<p>
					<label>Secret Answer </label>
					<form:input path="secretAnswer" cssClass="uiTextbox" />
				</p>
				<p>
					<label>Status </label>
					<form:select path="status" items="${userstatus }" itemLabel="name"></form:select>
				</p>
				<p>
					<label>Password <span class="required">*</span> </label>
					<form:password id="txtPassword" path="clearTextPassword" cssClass="uiTextbox"
						size="25" />
				</p>

				<p>
					<label>Confirmation <span class="required">*</span> </label>
					<input type="password" class="uiTextbox" id="txtPasswordConfirmation" size="25" />
				</p>
			</div>
		</div>
		<div class="splitcontentright">
			<div class="box">
				<h3>Roles</h3>
				 <c:if test="${not empty roles && fn:length(roles) > 0}">
					<p>
						<form:checkboxes items="${roles }" path="roles" itemValue="id" itemLabel="name" />
					</p>
				 </c:if>
				</div>
		</div>
		<div style="clear: both"></div>
		<div>
			<input id="btnSaveUser" type="submit" value="Save" class="uiButton" /> 
		</div>
	</form:form>
</div>